<template>
    <div>
<h1>首页显示</h1>
房型: <select v-model="dataps.scope">
    <option value="0">请选择</option>
    <option v-for="a in types" :value="a.scopeId">{{a.scopeName}}</option>
</select>
状态 <select v-model="dataps.stateid">
    <option value="0">请选择</option>
    <option v-for="s in scopes" :value="s.sid">{{s.stateName}}</option>
</select>
<input type="button" value="查询" class="btn btn-success" @click="GetShows">

  <input type="button" value="批量删除" class="btn btn-success" @click="Dels">
  <a href="/AddScope">新增</a>
  <a href="https://localhost:7294/api/Lode/ExeclIpoc">导出</a>
        <table class="table"> 
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="Qx" @change="QxFx">
                    </td>
                    <td>房号</td>
                    <td>联系方式</td>
                    <td>联系人</td>
                    <td>房型</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
   <tr v-for="d in data">
    <td>
        <input type="checkbox" v-model="Fx" :value="d.id">
    </td>
                    <td>{{d.scopeIds}}</td>
                    <td>{{d.phone.substring(0,2)}} 
                        **{{d.phone.substring(4,7)}}**{{d.phone.substring(9,11)}} 

                    </td>
                    <td>{{d.scopeNamesa}}</td>
                    <td>{{d.scopeName}}</td>
                    <td>
                        <img :src="'https://localhost:7294/'+d.imgURL" style="width: 60px;height: 60px;">
                    </td>
                    <td>
                        <span v-if="d.stateName=='空闲'" style="color: green;">
                            {{d.stateName}}
                        </span>
                          <span v-else-if="d.stateName=='维修'" style="color: red;">
                            {{d.stateName}}
                        </span>
                         <span v-else="d.stateName=='已入住'" style="color: blue;">
                            {{d.stateName}}
                        </span>
                       </td>
                    <td>
                        <input type="button" value="编辑" class="btn btn-success" @click="Updates(d.id)">
                    </td>
                </tr>
            </tbody>
        </table>
当前{{dataps.pageindex}}页 显示{{dataps.pagesize}}条 一共{{dataas.count}}条 一共{{dataas.list}}页
<input type="button" value="首页" @click="page(1)">
<input type="button" value="上一页" @click="page(dataps.pageindex-1)">
<input type="button" v-for="s in dataas.list" :value="s" @click="Tzd(s)">
<input type="button" value="下一页" @click="page(dataps.pageindex+1)">
<input type="button" value="尾页" @click="page(dataas.list)">
<select v-model="dataps.pagesize" @change="Yrl">
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="10">10</option>
</select>
<input type="text" v-model="dataps.pageindex"> <input type="button" value="跳转" @click="Tz">

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(()=>{
    GetShows();
    typess();
    scopess();
})
const Qx=ref(false)
const Fx=ref([])
const Updates=(e:any)=>{
    router.push({path:"/Updatesa",query:{id:e}})
}
const QxFx=()=>{
    if(Qx.value)
{
    data.value.forEach(e=>{
        Fx.value.push(e.id)
    })
}
else
{
    Fx.value=[];
}
}

const Dels=()=>{
    if(!confirm("确定要删除吗"))
{
    return;
}
    axios.delete("/api/ScopeId/DelPl",{params:{idstring:Fx.value.toString()}}).then(res=>{
        if(res.data>0)
    {
        alert("删除成功");
        GetShows();
    }
    else
    {
        alert("删除失败");
    }
    })
}

const types=ref([{
     "scopeId": 0,
    "scopeName": ""
}])
const typess=()=>{
axios.get("/api/Scope/GetScope",{params:types.value}).then(res=>{
    types.value=res.data;
})
}
const scopes=ref([{
    "sid": 0,
    "stateName": ""
}])
const scopess=()=>{
axios.get("/api/State/GetState",{params:scopes.value}).then(res=>{
    scopes.value=res.data;
})
}

const Tzd=(e:any)=>{
dataps.value.pageindex=e;
GetShows();
}

const Tz=()=>{
    GetShows();
}

const Yrl=()=>{
    GetShows();
}

const page=(e:any)=>{
    if(e>=1&&e<=dataas.value.list)
{
    dataps.value.pageindex=e;
    GetShows();
}
}

const dataps=ref({
    pageindex:1,
    pagesize:2,
    stateid:0,
    scope:0
})
const data=ref([{
          "scopeId": 1,
      "scopeName": "大床房",
      "sid": 1,
      "stateName": "空闲",
      "id": 1,
      "endid": 1,
      "stateId": 1,
      "scopeNamesa": "典韦",
      "isDeldate": null,
      "imgURL": "/Img/2.jpg",
      "isDel": false,
      "phone": "15511047384",
      "scopeIds": "101"
}])

const dataas=ref({
    count:0,
    list:0
})
const GetShows=()=>{
    axios.get("/api/ScopeId/GetShowsas",{params:dataps.value}).then(res=>{
        data.value=res.data.list;
        dataas.value.count=res.data.count;
        dataas.value.list=Math.ceil(dataas.value.count/dataps.value.pagesize);
    })
}

</script>

<style scoped>

</style>